<%--
  Created by IntelliJ IDEA.
  User: martin
  Date: 2020-05-18
  Time: 21:08
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page isELIgnored="false" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<html>
<head>
    <title>resume</title>
</head>

<style>
    .content{
        margin:0 auto; /* 居中 这个是必须的，，其它的属性非必须 */
        width:500px; /* 给个宽度 顶到浏览器的两边就看不出居中效果了 */
        text-align:center; /* 文字等内容居中 */
    }
    .contentAdd{
        display: none;
    }
</style>
<body>



<div class = "content">
    <div style="float: right;">
        <button value="新增" onclick="showOpen()">新增</button>
    </div>

    <table cellspacing="1" border="1">
        <thead>
        <tr>
            <td>编号</td>
            <td>姓名</td>
            <td>地址</td>
            <td>手机号</td>
            <td>操作</td>
        </tr>
        </thead>
        <tbody>

        <c:forEach items="${resumes}" var="resume">
            <tr>
                <td>${resume.id}</td>
                <td>${resume.name}</td>
                <td>${resume.address}</td>
                <td>${resume.phone}</td>
                <td>
                    <a href="javascript:void(0)" id="edit"
                       onclick="edit(${resume.id},'${resume.name}','${resume.address}','${resume.phone}');">编辑</a>
                    <a href="deleteById/${resume.id}">删除</a>
                </td>
            </tr>
        </c:forEach>
        </tbody>
    </table>
    <hr/>
    <div class="contentAdd">
        <div>新增和编辑</div>
        <div>
            <form action="saveAndUpdate" method="post">
                <input name="id" id="id" type="hidden">
                名称:<input name="name" id="name"></br>
                地址:<input name="address" id="address"></br>
                电话:<input name="phone" id="phone"></br>
                <input type="submit" value="提交">
            </form>
        </div>
    </div>
</div>
</body>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery.min.js"></script>
<script type="text/javascript" src=""></script>
<script type="text/javascript">
    function edit(id, name, address, phone) {
        $("#id").val(id);
        $("#name").val(name);
        $("#address").val(address);
        $("#phone").val(phone);
    }
    
    function showOpen() {
        $(".contentAdd").show();
    }
</script>
</html>
